<html>
<head>
  <meta content="">
  <title>FULL STEAM (-PUNK)</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/crafty.js"></script>
  <script type="text/javascript" src="/tiles.js"></script>
  <script type="text/javascript" src="js/webSocket.js"></script>
  <script type="text/javascript" src="js/camera.js"></script>

  <script type="text/javascript" src="js/steamTrain.js"></script>
  <!-- script type="text/javascript" src="js/map.js"></script -->
  <script type="text/javascript" src="js/fullsteam.js"></script>
  <style type="text/css">
    @font-face {
        font-family: "pixelFont";
        src: url(font/pixelsix10.ttf) format("truetype");
    }
    body {width: 1800px; height: 900px; padding: 0; margin:auto; left: 50%; top: 50%; background-image: url('pic/backg.png'); font-family: pixelFont;}
  #cr-stage   { border:0; margin: 0; right:30px; top: 50px; position: absolute !important; color:black; font-family: pixelFont; }
  #messages   { border:0; margin: auto; right: 280px; top: 200px; height: 100px; width: 400px; position:absolute; display: table-cell; vertical-align: middle; text-align: center; font-family: pixelFont; font-size: 70px; z-index: 999}
  #steamEngine{ border:0; margin: 0; left:100px; top: 20px; position: absolute !important; color:black; background-color: transparent; font-family: pixelFont;}
  #Highscore  { border:0; margin: 0; left:320px; top: 390px; position: absolute !important; color:black; background-color: transparent; font-family: pixelFont;}
  #devices    { border:0; margin: 0; left:100px; top: 500px; position: absolute !important; color:black; font-family: pixelFont;}
  #Score      { border:0; margin: 0; left:425px; top: 410px; position: absolute !important; height: 100px; width: 200px; color:black; font-family: pixelFont; background-color: transparent; display: table-cell; text-align: center; font-family: pixelFont; font-size: 40px;color: #ffffff; z-index: 999}
  img         {border: 0;}
</style>
</head>
<body>
  <img src="pic/randcanvas.png" style="position: absolute; padding:0; margin: 0; right:10px; top: 30px; border: 0; z-index: 99"/>


  <label id="messages"> </label>

  <img id="Highscore" src="pic/Highscore.png" alt="" class="" style="display: block" />

  <div id="steamEngine" >
    <img id="kg1" src="pic/kesselanzeige/Kesselgflamme1.png" alt="" class="kesselg kesselflamme" style="display: none"/>
    <img id="kg2" src="pic/kesselanzeige/Kesselgflamme2.png" alt="" class="kesselg kesselflamme" style="display: none"/>
    <img id="kk1" src="pic/kesselanzeige/Kesselkflamme1.png" alt="" class="kesselk kesselflamme" style="display: none"/>
    <img id="kk2" src="pic/kesselanzeige/Kesselkflamme2.png" alt="" class="kesselk kesselflamme" style="display: none"/>
    <img id="km1" src="pic/kesselanzeige/Kesselmflamme1.png" alt="" class="kesselm kesselflamme" style="display: block"/>
    <img id="km2" src="pic/kesselanzeige/Kesselmflamme2.png" alt="" class="kesselm kesselflamme" style="display: none"/>
    <script>
      function kesselanimation()
      {
        var mode = $.data(document.body,"kesselMode");
        $(".kesselflamme").hide();
        switch(mode)
        {
          case "m1":
            $(".kesselflamme").hide();
            $("#km1").show();
            $.data(document.body,"kesselMode","m2");
            break;
          case "m2":
            $(".kesselflamme").hide();
            $("#km2").show();
            $.data(document.body,"kesselMode","m1");
            break;
          case "k1":
            $(".kesselflamme").hide();
            $("#kk1").show();
            $.data(document.body,"kesselMode","k2");
            break;
          case "k2":
            $(".kesselflamme").hide();
            $("#kk2").show();
            $.data(document.body,"kesselMode","k1");
            break;
          case "g1":
            $(".kesselflamme").hide();
            $("#kg1").show();
            $.data(document.body,"kesselMode","g2");
            break;
          case "g2":
            $(".kesselflamme").hide();
            $("#kg2").show();
            $.data(document.body,"kesselMode","g1");
            break;
        }
        setTimeout("kesselanimation();",500);
      }

      $(document).ready(function()
      {
        $.data(document.body,"kesselMode","m1");
        kesselanimation();
      });

    </script>
  </div>

  <div id="devices">
    <table style="border: 0; width: 728px; height: 300px; margin:0;padding: 0;background-image: url('pic/playerstats.png'); color: #ffffff">
      <tr>
        <td id="smartphone0" style="height: 225px; width: 182px; padding: 0; text-align: center">
          <img src="pic/telefront.png" class="front" style="display: none; margin: auto;"/>
          <img src="pic/teleback.png" class="back" style="display: none; margin: auto;"/>
          <br /><span style="text-align: center"></span>
        </td>
        <td id="smartphone1" style="height: 225px; width: 182px; text-align: center">
          <img src="pic/telefront.png" class="front" style="display: none; margin: auto;"/>
          <img src="pic/teleback.png" class="back" style="display: none; margin: auto;"/>
          <br /><span style="text-align: center"></span>
        </td>
        <td id="smartphone2" style="height: 225px; width: 182px; text-align: center">
          <img src="pic/telefront.png" class="front" style="display: none; margin: auto;"/>
          <img src="pic/teleback.png" class="back"  style="display: none; margin: auto;"/>
          <br /><span style="text-align: center"></span>
        </td>
        <td id="smartphone3" style="height: 225px; width: 182px; text-align: center">
          <img src="pic/telefront.png" class="front" style="display: none; margin: auto;"/>
          <img src="pic/teleback.png" class="back" style="display: none; margin: auto;" />
          <br /><span style="text-align: center"></span>
        </td>
      </tr>
      <tr>
        <td id="user0" style="height: 70px; width: 182px; text-align: center"></td>
        <td id="user1" style="text-align: center"></td>
        <td id="user2" style="text-align: center"></td>
        <td id="user3" style="text-align: center"></td>
      </tr>
    </table>
  </div>

  <div id="Score"></div>

</body>
</html>